<template>
  <div class="payment">
    <attendant
      :name="attendant.nickname"
      :slogan="attendant.slogan"
      :avatar="attendant.avatar"
      :target="target"
      :person="attendant.person_count"
      :paymen="attendant.payment_count">
    </attendant>

    <div class="inputBox">
      <input type="text" placeholder="请输入支持语" v-model="comment">
    </div>
    <div class="moneyBox">
      <p @click="clickP" v-bind:class="{ border: iSborder }">8.88</p>
      <p @click="clickP" v-bind:class="{ border: iSborder }">18.88</p>
      <p @click="clickP" v-bind:class="{ border: iSborder }">66.66</p>
      <p @click="clickP" v-bind:class="{ border: iSborder }">188.88</p>
    </div>
    <div class="inputBox" @click="clickP">
      <input type="text" placeholder="请输入金额" class="txt" v-model="money">
      <p>￥</p>
    </div>
    <div class="fontBox">
      <h3>注意：</h3>
      <p>请准确输入您要支持的金额</p>
      <p>支付成功后讲无法退回</p>
      <p>如有问题请联系我们的客服</p>
    </div>
    <div class="btnbox" @click="payment">
      <input type="button" value="微信支付" >
    </div>
  </div>
</template>

<script>
  import { requestDetail, requestPayment, requestMe } from '../../api/api'
  import { baseUrl } from '../../config'
  export default {
    name: 'payment',
    data () {
      return {
        attendant: [],
        target: '',
        iSborder: false,
        money: 8.88,
        process: false,
        comment: '我已经支持了，大家一起踊跃支持吧！',
        nickname: '',
        avatar: ''
      }
    },
    mounted: function () {
      this.$nextTick(function () {
        this.loadData()
        this.loadMe()
      })
    },
    methods: {
      loadData: function () {
        let e = this
        requestDetail(this.$route.query.sponsorsId, this.$route.query.detailId, {}).then(function (res) {
          e.attendant = res.data
          e.target = res.data.sponsor.target_payment
        })
      },
      loadMe: function () {
        let e = this
        requestMe({}).then(function (res) {
          e.nickname = res.nickname
          e.avatar = res.avatar
        })
      },
      payment: function () {
        if (this.money < 1) {
          this.$swal('error', '支持金额最少为1元', 'error')
          return false
        }
        requestPayment(this.$route.query.detailId, {
          amount: this.money,
          comment: this.comment,
          nickname: this.nickname,
          avatar: this.avatar,
          url: baseUrl + '/detail?detailId=' + this.$route.query.detailId + '&sponsorsId=' + this.$route.query.sponsorsId
        }).then(function (res) {
          location.href = res.url
        })
      },
      clickP: function () {
        let item = document.querySelectorAll('.moneyBox p')
        item[0].classList.remove('border')
        item[1].classList.remove('border')
        item[2].classList.remove('border')
        item[3].classList.remove('border')
        event.target.classList.add('border')
        this.money = event.target.innerHTML
      }
    }
  }
</script>

<style scoped lang="less">
  @in:30.5rem;
  @border:#e8e8e8;
  @font:#8e8e8e;
  @orange:#f1ae9b;
  .inputBox{
    width: @in;
    height: 4rem;
    background: #ededed;
    margin:15/1/10rem auto;
    position: relative;
    border-radius: 0.25rem;
    overflow: hidden;
    input{
      width: @in;
      height: 4rem;
      background: none;
      font-size:1.2rem;
      padding:0 2rem 0 0.5rem;
      box-sizing: border-box;
      position: absolute;
      left:0;
      top:0;
    }
    p{
      position: absolute;
      right: 1rem;
      top:1.2rem;
      font-size:1.2rem;
    }
  }
  .moneyBox{
    width: @in;
    height: auto;
    overflow: hidden;
    margin:0 auto;
    p{
      width: 6rem;
      height:4rem;
      float: left;
      border: 1px solid @border;
      text-align: center;
      line-height:4rem;
      border-radius: 0.25rem;
      margin-right:1.9rem;
      font-size:1.2rem;
    }
    .border{
      border: 1px solid @orange;
    }
    p:last-of-type{
      margin-right:0;
    }
  }
  .fontBox{
    width: @in;
    height: auto;
    overflow: hidden;
    margin:0 auto;
    h3{
      font-weight: normal;
      color: #000;
    }
    p{
      line-height:2rem;
    }
  }
  .btnbox{
    width: @in;
    height: 4rem;
    margin:0 auto;
    background: #96e896;
    margin-top:15/2/10rem;
    border-radius: 0.25rem;
    overflow: hidden;
    input{
      background: none;
      font-size:1.2rem;
      color: #fff;
      text-align: center;
      width: 100%;
      height: 100%;
    }
  }
</style>
